<template>
  <!--  -->
  <div class="main">
    <div class="content">
      <div class="top">
        <el-form label-width="90px">
          <el-row>
            <el-col
              v-for="(item, index) in outList"
              :key="item.id"
              :span="Number(item.span) || 12"
            >
              <el-form-item :label="item.label">
                <div class="out-item flex">
                  <template v-if="item.type == 'input'">
                    <el-input :placeholder="item.placeholder" />
                  </template>
                  <template v-if="item.type == 'select'">
                    <el-select :placeholder="item.placeholder">
                      <el-option
                        v-for="item in selectList"
                        :key="item.id"
                        :label="item.label"
                        :value="item.id"
                      />
                    </el-select>
                  </template>
                  <template v-if="item.type == 'radio'">
                    <el-radio-group>
                      <el-radio
                        v-for="(item, index) in selectList"
                        :label="item.label"
                        :key="index"
                        :value="item.value"
                      ></el-radio>
                    </el-radio-group>
                  </template>
                  <template v-if="item.type == 'check'">
                    <el-checkbox-group>
                      <el-checkbox
                        v-for="(item, index) in selectList"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      ></el-checkbox>
                    </el-checkbox-group>
                  </template>
                  <template v-if="item.type == 'switch'">
                    <el-switch active-text="" inactive-text="" />
                  </template>
                  <template v-if="item.type == 'time'">
                    <el-date-picker
                      type="datetime"
                      :placeholder="item.placeholder"
                    />
                  </template>
                  <template v-if="item.type == 'time-range'">
                    <el-date-picker
                      type="datetimerange"
                      :placeholder="item.placeholder"
                      start-placeholder="Start date"
                      end-placeholder="End date"
                    />
                  </template>
                  <span @click="edit(item)">编辑</span>
                  <span @click="del(index)">删除</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="bottom flex">
        <el-button type="primary" @click="add">添加</el-button>
        <el-button type="success" @click="out">完成</el-button>
      </div>
    </div>
    <ttPop v-model="showAdd" @sure="addSure" title="新增">
      <div class="add-pop">
        <el-form :model="formData" label-width="90px" ref="formCtx">
          <el-form-item
            label="label"
            prop="label"
            :rules="[{ required: true, trigger: 'blur' }]"
          >
            <el-input v-model="formData.label" />
          </el-form-item>
          <el-form-item label="id" prop="id" :rules="[{ required: true }]">
            <el-input v-model="formData.id" />
          </el-form-item>
          <el-form-item label="placeholder" prop="placeholder">
            <el-input v-model="formData.placeholder" />
          </el-form-item>
          <el-form-item
            label="宽度"
            type="number"
            prop="span"
            :rules="[{ required: true }]"
          >
            <el-input v-model="formData.span" />
          </el-form-item>
          <el-form-item
            label="必填"
            prop="required"
            :rules="[{ required: true }]"
          >
            <el-switch v-model="formData.required" />
          </el-form-item>
          <el-form-item
            label="类型"
            prop="type"
            :rules="[{ required: true, trigger: 'change' }]"
          >
            <el-select v-model="formData.type" placeholder="类型">
              <el-option
                v-for="item in typeList"
                :key="item.type"
                :label="item.name"
                :value="item.type"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="选择项key"
            prop="selectKey"
            :rules="[{ required: true }]"
            v-if="['select', 'radio', 'check'].includes(formData.type)"
          >
            <el-input v-model="formData.selectKey" />
          </el-form-item>

          <el-form-item
            v-if="formData.type == 'time-range'"
            label="time1"
            prop="time1"
            :rules="[{ required: true }]"
          >
            <el-input v-model="formData.time1" />
          </el-form-item>
          <el-form-item
            v-if="formData.type == 'time-range'"
            label="time2"
            prop="time2"
            :rules="[{ required: true }]"
          >
            <el-input v-model="formData.time2" />
          </el-form-item>
        </el-form>
      </div>
    </ttPop>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import ttPop from "@/components/tt/tt-pop/index.vue";
import useUtils from "@/utils";
import { outStr } from "./create";
import { messageConfig } from "element-plus";

const { $common, $router, $store, $global } = useUtils();

let formData = $ref(null);

function resetForm() {
  formData = {
    id: "",
    type: "",
    placeholder: "",
    label: "",
    required: true,
    span: 12,
    selectKey: "",
    time1: "",
    time2: "",
  };
}

let typeList = [
  {
    name: "输入框",
    type: "input",
  },
  {
    name: "数字框",
    type: "number",
  },
  {
    name: "文本框",
    type: "textarea",
  },
  {
    name: "选择框",
    type: "select",
  },
  {
    name: "单选框",
    type: "radio",
  },
  {
    name: "复选框",
    type: "check",
  },
  {
    name: "开关",
    type: "switch",
  },
  {
    name: "时间",
    type: "time",
  },
  {
    name: "时间范围",
    type: "time-range",
  },
];

let selectList = [];

let outList = $ref([]);

let showAdd = $ref(false);
function add() {
  resetForm();
  showAdd = true;
}
function addSure() {
  let data = $common.deepCopy(formData);
  outList.push(data);
  showAdd = false;
}

let formCtx = $ref(null);
function out() {
  let str = outStr(outList);
  $common.copyMsg(str);
}

function edit(item) {
  formData = item;
  showAdd = true;
}
function del(index) {
  outList.splice(index, 1);
}
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .top {
    flex: 1;
    // background-color: pink;
    overflow: hidden;
    .out-item {
      width: 100%;
    }
  }
  .bottom {
    padding: 10px 0;
  }
  .add-pop {
    .label {
      display: flex;
      margin-bottom: 20px;
      align-items: center;
      .title {
        min-width: 60px;
        text-align: right;
      }
    }
  }
}
</style>
